<template>
  <div>
    <el-menu
      :default-active="this.$route.path"
      class="d-flex header"
      mode="horizontal"
      router
      type="flex"
    >
      <el-menu-item class="mr-auto" >SU_blog</el-menu-item>
      <el-menu-item>
        <el-input
          ref="input_search"
          v-model="input"
          placeholder="请输入内容"
          suffix-icon="el-icon-search"
          v-bind:class="{ active: isActive }"
          @focus="Dobigger()"
          @blur="Dosmall"
        ></el-input>
      </el-menu-item>
      <el-menu-item index="/" :default-active="this.$route.path">首页</el-menu-item>
      <el-menu-item index="/archive" :default-active="this.$route.path">分类</el-menu-item>
      <el-menu-item index="/time" :default-active="this.$route.path">时光轴</el-menu-item>
      <el-menu-item index="/about" :default-active="this.$route.path">关于</el-menu-item>
     
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "/home",
      input: "",
      isActive: false
    };
  },
  methods: {
    Dobigger() {
      this.$data.isActive = true;
    },
    Dosmall() {
      this.$data.isActive = false;
    }
  }
};
</script>

<style scoped>
.header {
  padding-left: 15%;
  padding-right: 15%;
}
.active {
  width: 400px;
}
</style>